@import "../../styles/_variables";
@import "../../styles/_mixins";

.results-pane {
  border-left: 1px solid var(--playground-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.results-tabs {
  height: 100%;
  width: 100%;
}

.mermaid {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
}

.collapsible-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0px;
  height: 0;

  &.collapsed {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
    height: auto;
  }
}

.collapsible-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
}

.diff-hint {
  margin-left: auto;
  opacity: 0.8;

  .insertions {
    color: green;
  }

  .deletions {
    color: red;
  }

  .error {
    color: red;
    font-weight: bold;
  }
}

.cm-theme-light, .cm-theme-dark {
  height: 100%;
  overflow: auto;
}

.cm-editor {
  height: 100%;
}

.cm-focused {
  outline: none !important;
}
